import React, { useEffect, useState } from 'react'
import { Card, message } from 'antd'
import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form'
import { editWebConfig, getWebConfigDetail } from '@/services/webconfig'
import ProSkeleton from '@ant-design/pro-skeleton'
import FileUpload from '@/components/Upload'

const Setting = () => {
  // 把获取到的数据存到状态
  const [configer, setConfiger] = useState([])
  // 获取logo图片地址
  const [logoUrl, setLogoUrl] = useState(undefined)
  // 获取slogan图片地址
  const [sloganUrl, setSloganUrl] = useState(undefined)

  //定义Form实例 用来操作表单
  const [formObj] = ProForm.useForm()

  useEffect(async () => {
    /**
     * 获取网站配置详情
     */
    await getWebConfigDetail('site_setting').then(res => {
      setLogoUrl(res.value.site_logo)
      setSloganUrl(res.value.site_slogan)
      return setConfiger(res.value)
    })
  }, [])

  /**
   * 修改网站配置
   * @param values 表单中输入的数据
   * @returns {Promise<void>}
   */
  const updataWebConfig = async values => {
    console.log(values)
    /**
     * 定义要修改的字段
     * @type {{cn_name: string, id, type: string, value: {site_logo: string, site_name, site_slogan: string, site_code}}}
     */
    const data = {
      'cn_name': '站点设置',
      'value': {
        'site_logo': values.site_logo,
        'site_name': values.site_name,
        'site_slogan': values.site_slogan,
        'site_code': values.site_code
      }
    }
    /**
     * 执行修改
     * @type {*}
     */
    const response = await editWebConfig('site_setting', data)

    if (response.status === undefined) {
      message.success('修改成功')
    }
  }

  // 获取阿里OSS logo 的地址
  const onChangeLogoUrl = url => {
    setLogoUrl(url)
  }

  // 获取阿里OSS slogan 的地址
  const onChangeSloganUrl = url => {
    setSloganUrl(url)
  }
  /**
   * 文件上传成功后设置文件上传的value
   * @param fileKey
   * @returns {*}
   */
  const setLogoKey = fileKey => formObj.setFieldsValue({ 'site_logo': fileKey })
  const setSloganKey = fileKey => formObj.setFieldsValue({ 'site_slogan': fileKey })
  return (
    <div title="输入表单">
      {
        configer.site_name === undefined ?
          <div
            style={{
              background: '#fafafa',
              padding: 24,
            }}
          >
            <ProSkeleton type="list"/>
          </div> :
          <Card>
            <ProForm
              onFinish={values => updataWebConfig(values)}
              form={formObj}
              initialValues={configer}
              submitter={{
                // 配置按钮的属性
                resetButtonProps: {
                  style: {
                    // 隐藏重置按钮
                    display: 'none',
                  },
                },
              }
              }
            >
              <ProFormText
                width="md"
                name="site_name"
                label="网站名称"
                rules={[{ required: true, message: '请输入网站名称' }]}
              />
              <ProForm.Item
                name="site_logo"
                label="网站logo"
                rules={[{ required: true, message: '请上传网站logo' }]}
              >
                <div>
                  <FileUpload
                    url={logoUrl}
                    onHandle={onChangeLogoUrl}
                    accept="image/*"
                    setUrlKey={setLogoKey}
                    listType={'picture-card'}
                  >
                    {
                      logoUrl.indexOf('https') === -1 ? '' : <img src={logoUrl} width={'100%'} height={'100%'} alt=""/>
                    }
                  </FileUpload>
                </div>
              </ProForm.Item>

              <ProForm.Item
                name="site_slogan"
                label="网站slogan"
                rules={[{ required: true, message: '请上传网站slogan' }]}
              >
                <div>
                  <FileUpload
                    url={sloganUrl}
                    onHandle={onChangeSloganUrl}
                    accept="image/*"
                    setUrlKey={setSloganKey}
                    listType={'picture-card'}
                  >
                    {
                      sloganUrl.indexOf('https') === -1 ? '' : <img src={sloganUrl} width={'100%'} height={'100%'} alt=""/>
                    }
                  </FileUpload>
                </div>
              </ProForm.Item>

              <ProFormTextArea
                width="xl"
                label="网站代码"
                name="site_code"
                rules={[{ required: true, message: '请输入网站代码' }]}
              />
            </ProForm>
          </Card>
      }
    </div>
  )
}

export default Setting
